import React, {JSX} from 'react';
import {View, StyleSheet} from 'react-native';
import {BasicText} from '../../kit/text';
import {WithdeawalHistoryItem} from './index';
import { normalize } from '../../utils/adapter';

type HistoryItemProps = {} & WithdeawalHistoryItem;

export default function ({label, date, amount}: HistoryItemProps): JSX.Element {
  return (
    <View style={styles.item_container}>
      <View style={styles.left}>
        <BasicText color="#333333" fontSize={normalize(16)} fontWeight={'bold'}>
          {label}
        </BasicText>
        <BasicText color="#999999" fontSize={normalize(14)} style={{marginTop: normalize(10)}}>
          {date}
        </BasicText>
      </View>
      <View>
        <BasicText color="#FF685A" fontSize={normalize(20)} fontWeight={'bold'}>
          +{amount}
        </BasicText>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  item_container: {
    borderBottomColor: '#DDDDDD',
    borderBottomWidth: normalize(0.5),
    borderStyle: 'solid',
    paddingVertical: normalize(20),
    flexDirection:'row',
    alignItems:'center',
  },
  left: {
    flex: 1,
  },
});
